<template>
    <div class="take">
        <li>
            <img class="take-head" :src="headImg" alt="">
            <div class="take-user">
                <span class="name">{{ name }}</span>
                <span class="take-content">{{ take }}</span>
            </div>
            <span class="read-time">{{ readTime }}</span>
        </li>
    </div>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
    headImg: {
        type: String,
        default: '/default.jpg'
    },
    name: {
        type: String,
        default: 'admin'
    },
    take: {
        type: String,
        default: '君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。'
    },
    readTime: {
        type: String,
        default: '2024-01-01 00:00:00'
    }
})

</script>

<style lang="scss" scoped>
.take {
    width: 100%;
    padding: 20px;
    height: 100px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;

    li {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .take-head {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 1px solid #eee;
            margin-right: 10px;
        }

        .take-user {
            width: 80%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            .name {
                font-size: 14px;
                font-weight: 600;
            }

            .take-content {
                font-size: 14px;
                color: #666;
            }
        }

        .read-time {
            font-size: 12px;
            color: #999;
        }
    }
}


</style>